<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:head="http://www.w3.org/1999/html">
<head th:include="public/public_css::public_css ('品项数分析')" />

<body style="background-color: #f2f2f2;">
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-xs24">
                <div class="layui-collapse" lay-filter="test">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">品项数分析</h2>
                        <div class="layui-colla-content" style="float: left;">
                            <label  data-title>货品种类</label>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <!--<input type="text" name="zdwsl" id="zdwsl" lay-verify="required" autocomplete="off" placeholder="请输入补货上限" value="1" class="layui-input" style="width: 120px">-->
                                    <select lay-ignore="lay-ignore" class="js-data-example-zl"  multiple="multiple" name="zl" style="width: 193px;height: 3rem;border-radius: 1px">
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-colla-content" style="float: left;">
                            <label  data-title>产品名称</label>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <!--<input type="text" name="zdwsl" id="zdwsl" lay-verify="required" autocomplete="off" placeholder="请输入补货上限" value="1" class="layui-input" style="width: 120px">-->
                                    <select lay-ignore="lay-ignore" class="js-data-example-mc" name="mc" multiple="multiple"  style="width: 193px"></select>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<div th:include="public/public_js::public_js"></div>
<script>
    //	回车查询
    document.onkeydown = function(event) {
        e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13) {
            //执行的方法
            $('#search_button').click();
        }
    };
    $(function () {
        $(".moreBtn").on("click",function () {
            $(".moreSearch").toggle();
        })
    })
    layui.use(['list','layer','zzpUtils','jquery','laydate'],function () {
        var zzpUtils= layui.zzpUtils,
            $ = layui.jquery,
            laydate = layui.laydate;
        // 年月选择器
        laydate.render({
            elem: '#test3',
            type: 'month',
        });
//        laydate.render({
//            elem: '#test5'
//            ,theme: '#20a0ff'
//        })

        //select2 查产品分类
        $('.js-data-example-zl').select2({
            tags: true,
            tokenSeparators: [',', ' '],  //一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [',',' '] 。
            closeOnSelect: false,
            ajax: {
                url: '/zxsswms/statistics/goodsType',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        mc: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                   var  arr= [];
                    if(data){
                        for (var i=0;i<data.rows.length;i++){
                            arr.push({id:data.rows[i].id,text:data.rows[i].mc});
                        }
                    }
                    console.log('arr',arr);
                    return {
                        results: arr
                    };
                },
                cache: true,
            },
            language: "zh-CN",
            placeholder: '请选择产品分类',
            allowClear: true,
        });
//      //select2 查产品名称
        $('.js-data-example-mc').select2({
            closeOnSelect: false,
            ajax: {
                url: '/zxsswms/statistics/seachGoods',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        mc: params.term,
                        ids: $('.js-data-example-zl').val(),
                };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr= new Array();
                    if(data){
                        for (var i=0;i<data.rows.length;i++){
                            arr.push({id:data.rows[i].id,text:data.rows[i].mc});
                        }
                    }
                    console.log(arr);
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请选择产品名称',
            allowClear: true
        });
        window.operateEvent ={
            "click .layui-btn-primary":function (e, value, row, index) {
                alert(row.mc);
            }
        }
        //查询list
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:true,
            striped: true,
            url: '[{}]',
            columns: [],
            queryParams: function () {//查询条件
                return  zzpUtils.getFormJson($("#searchForm"));
            },
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            }
        });

        $(".inline-search-btn").on('click',function () {
            zzpUtils.refreshTable("#table");
        })
        /*顶部按钮多选启用*/
        $("#btn_qi").on('click', function () {
            var index = 0;
            var $rows = $table.bootstrapTable('getSelections');

        })
    });
</script>
</html>